<style scoped>
.reportTable {
	width: 100%;
	text-align: center;
	border-collapse: collapse;
	font-size: 14px;
}

.reportTable>tr {
	line-height: 28px;
}

.reportTable>tr>td {
	border: 1px solid #000;
}

.reportTable>tr>td>input {
	width: 100%;
	border: none;
	text-align: center;
	line-height: 28px;
}

.reportTable>tr>td>span {
	color: green;
	font-size: 14px;
}

.reportTable>caption {
	font-size: 24px;
}

.ivu-tabs-tabpane {
	height: 450px;
	overflow: auto;
	overflow-x: auto;
}

.ivu-tabs-nav-container {
	font-size: 16px;
}

.ivu-modal-body {
	padding: 10px !important;
}

.ivu-modal-footer {
	padding: 10px !important;
}

.ivu-collapse-header {
	font-size: 16px;
}

thead {
	font-size: 16px;
}

th>.ivu-table-cell {
	font-size: 16px !important;
}

.tabletitle {
	margin-bottom: 15px;
	font-size: 16px !important;
}

.tabletitle>.ivu-form-item-content>input {
	float: right;
}
</style>
<template>
	<div>
		<div class="table">
			<row>
				<div class="divmenu">
					<i-col :lg="{span:2}" :md="{span:8}" :sm="{span:10}" :xs="{span:20}">
						<i-button size="large" @click="Add" type="primary" class="searchButton">
							<p class="title">
								<Icon type="plus-circled" size="20"></Icon>&nbsp;&nbsp;
								<span>新增</span>
							</p>
						</i-button>
					</i-col>
				</div>
			</row>
			<div class="divSearch" style="padding: 6px;">
				<!--搜索框-->
				<row>
					<i-col :lg="{span:4}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
						<Input type="text" size="large" v-model="SearchModel.Name" placeholder="请输入行政区划名称">
						<span slot="prepend">行政区划名称:</span>
						</Input>
					</i-col>
					<i-col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
						<Button icon="ios-search" type="ghost" @click="Search()" style="margin-left: 5px;margin-top: 3px;background: linear-gradient(to bottom, #64c8ef 0%,#00a2e2 100%);color: #fff; margin-right: 0;border-radius: 3px;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);">
							查询
						</Button>
					</i-col>
				</row>
			</div>
			<row>
				<!--数据表格-->
				<Col>
				<Table :context="self" ref="table" :stripe=true border :columns="columns1" :data="datas.rows" size="large" @on-select-all="selectAll()" @on-select="selectSingel()" :height="clientHeight">
				</Table>
				</Col>
			</row>
			<row>
				<!--分页插件-->
				<div class="dataTable">
					<i-col>
						<!-- <spin size="large"></spin> -->
						<Page style="float:right;margin: 5px 20px 5px 0;" :total="datas.total" show-elevator show-sizer show-total placement="top" @on-change="changePage" @on-page-size-change="changePageSize" :page-size="20" :page-size-opts='pageSizeOpts'>
						</Page>
					</i-col>
				</div>
			</row>
		</div>
		<!--编辑-->
		<Modal v-model="ShowModal" :mask-closable="false">
			<p slot="close" @click="cancel('AreaModel')">
				<Icon type="close-circled" color="red" size="25"></Icon>
			</p>
			<p slot="header" class="title">
				<Icon type="leaf" color="green" size="20"></Icon>
				<span style="font-size: 20px">行政区划编辑</span>
			</p>
			<Form ref="AreaModel" :model="AreaModel" :rules="AreaRule" :label-width="80">
				<Form-item style="display:none;" prop="Id">
					<Input v-model="AreaModel.Id"></Input>
				</Form-item>
				<Form-item label="代码" prop="Code">
					<Input v-model="AreaModel.Code" placeholder="请输入代码"></Input>
				</Form-item>
				<Form-item label="父级代码" prop="ParentCode">
					<Input v-model="AreaModel.ParentCode" placeholder="请输入父级代码"></Input>
				</Form-item>
				<Form-item label="名称" prop="Name">
					<Input v-model="AreaModel.Name" placeholder="请输入名称"></Input>
				</Form-item>
				<Form-item label="地理坐标" prop="Coord">
					<Input v-model="AreaModel.Coord" placeholder="请输入名称"></Input>
				</Form-item>
			</Form>
			<div slot="footer">
				<Button @click="cancel('AreaModel')">取消</Button>&nbsp;&nbsp;
				<Button type="primary" @click="handleSubmit('AreaModel')">保存</Button>
			</div>
		</Modal>
	</div>
</template>
<script>
export default {
	data() {
		return {
			self: this,
			tableTotal: 0,//表格记录条数
			ShowModal: false,//model开关,针对form填报表格
			datas: {},//table数据对象
			clientHeight: window.innerHeight - 315,//设置表格高度
			pageSizeOpts: [20, 40, 50],//默认分页最大设置
			columns1: [
				//{type: 'selection',width: 60,align: 'center'},
				{ title: '地区代码', key: 'Code' },
				{ title: '父级代码', key: 'ParentCode' },
				{ title: '地区名称', key: 'Name' },
				{
					title: '操作', key: 'action', width: 200, align: 'center',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								class: { irefreshColor: true },
								props: {
									type: 'ghost', size: 'small', icon: 'ios-compose'
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {
										this.Edit(params.row.Id)
									}
								}
							}, '编辑'),
							h('Button', {
								class: { ideleteColor: true },
								props: {
									type: 'ghost', size: 'small', icon: 'ios-trash-outline'
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {
										this.Remove(params.row.Id)
									}
								}
							}, '删除'),
						])
					}
				}
			],
			SearchModel: {
				PageNumber: 1,//页码
				PageSize: 20,//页面数量
				Code: '', ParentCode: '', Name: '', Id: ''
			},
			AreaModel: {//V-model
				Code: '', ParentCode: '', Name: '', Id: 0, Coord: ''
			},
			//表单验证规则
			AreaRule: {//表单验证规则
				Code: [{ required: true, message: '请填写地区代码', trigger: 'blur' }],
				// ParentCode:[ { required: true, message: '请选择所属州市', trigger: 'change' }],
				Name: [{ required: true, message: '请填写地区名称', trigger: 'change' }],
			}
		}
	},
	mounted: function () {
		const that = this;
		window.onresize = () => {
			return (() => {
				that.clientHeight = window.innerHeight - 315;
			})()
		};

	},
	methods: {
		//查询方法
		Search() {
			this.initTableData();
		},
		Add: function () {//添加数据
			this.AreaModel.Code = 0;
			this.showModel();
		},
		showModel: function () {
			this.ShowModal = true;//显示对话框  
			// this.GetCity();    
		},
		handleSubmit(name) {//数据提交
			var self = this;
			self.$refs[name].validate((valid) => {
				if (valid) {
					if (self.AreaModel.Id == 0) {
						//数据添加
						this.$http.post('Area', self.AreaModel).then(
							function (res) {
								if (res.data.status == 1) {
									self.initTableData();
									self.$refs[name].resetFields();//重置model
									self.ShowModal = false;
									self.$Notice.success({ title: "信息添加成功" });
								}
								else {
									self.$Notice.warning({ title: "信息添加失败" });
								}
							});
					}
					else {
						//数据编辑
						self.$http.put('Area', self.AreaModel).then(
							function (res) {
								if (res.data.status == 1) {
									self.initTableData();
									self.$refs[name].resetFields();//重置model
									self.ShowModal = false;
									self.$Notice.success({ title: "数据编辑成功" });
								}
								else {
									self.$Notice.warning({ title: "数据编辑失败" });
								}
								self.AreaModel.Code = 0;
							});
					}
				}
			});
		},
		cancel: function (name) {//关闭新增对话框
			this.$refs[name].resetFields();//关闭表单校验
			this.ShowModal = false;//关闭对话框
		},
		//批量删除
		Removes: function (id, index) {//批量删除
			this.$Modal.confirm({
				title: '提示信息',
				content: '<p>数据删除后不可恢复，确定要删除？</p>',
				onOk: () => {
					this.tabledata = [];
					this.$Notice.success({ title: "数据删除成功" });
					this.tableTotal = this.tabledata.length;
				}
			});
		},
		Remove: function (ID) {//删除单条数据
			var self = this;
			self.$Modal.confirm({
				title: '提示信息',
				content: '<p>数据删除后不可恢复，确定要删除？</p>',
				onOk: () => {
					this.$http.delete("Area", { params: { id: ID } }).then(
						function (res) {
							if (res.data.status == 1) {
								self.$Notice.success({ title: "数据删除成功" });
								self.initTableData();
							}
							else {
								self.$Notice.error({ title: "数据删除失败" });
							}
						}
					)
				}
			});
		},
		Edit: function (id) {//编辑数据	
			var self = this;
			this.$http.get("Area", { params: { id: id } }).then(//获取数据编辑项的值
				function (res) {
					if (res.data.status == 1) {
						self.AreaModel = res.data.model;
						//self.AreaModel.Code=Code;
						self.showModel();
					}
					else {
						self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
					}
				}
			)
		},
		initTableData: function (SearchModel) {//初始化数据
			var self = this;
			this.$http.post("Area/PostPageList", this.SearchModel).then(function (res) {
				if (res.data.status == 1) {
					self.datas = res.data;
				}
				else {
					self.$Modal.error({ title: '提示信息', content: res.data.message });
				}
			})
		},
		changePage: function (pageIndex) {//改变页码事件
			this.SearchModel.PageNumber = pageIndex;
			this.initTableData();
		},
		changePageSize: function (pageSize) {//改变页面记录条数事件
			this.SearchModel.PageSize = pageSize;
			this.initTableData();
		}
	},
	created: function () { //初始化函数
		this.initTableData();
	}
}
</script>